<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Hello0></Hello0>
    <div class="container2">
      <Category title="电影" :list-data="films"/>
      <Category title="美食" :list-data="foods"/>
      <Category title="游戏" :list-data="games"/>
      <Category title="nothing" list-data="[12,34,56,78,90]">
        <h1 style="color: red">Slot used1!!!</h1>
        <h1 style="color: red">Slot used2!!!</h1>
      </Category>
    </div>

    <ShowHide/>
    <button @click="dialog0">dialog</button>
    <button @click="inc">increase</button>
    <h1>{{$store.state.sum}}</h1>
    <hr/>
    <div>
      <div>
        <router-link to="/about" active-class="font-red">About</router-link>
        <router-link to="/home" active-class="font-red">Home</router-link>

      </div>
      <div>
          <router-view></router-view>
      </div>
    </div>

  </div>
</template>

<script>

import HelloWorld from './components/HelloWorld.vue'
import Hello0 from "./components/Hello0";
import Swal from "sweetalert2/dist/sweetalert2";
import Category from "@/components/Category";
import ShowHide from "@/components/ShowHide";


export default {
  name: 'App',
  components: {
    Category,
    Hello0,
    HelloWorld,
    ShowHide
  },
  data() {
    return {
      films: ['A1', 'A2', 'A3', 'A4', 'A5'],
      foods: ['B1', 'B2', 'B3', 'B4', 'B5'],
      games: ['C1', 'C2', 'C3', 'C4', 'C5'],
    }
  },
  methods:{
    inc(){
      this.$store.dispatch("jia","hello");
    },
    dialog0(){
      Swal.fire(
          'Good job!',
          'You clicked the button!',
          'success'
      )

    }
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  mounted() {
    Swal.fire(
        'Good job!',
        'You clicked the button!',
        'success'
    )
    console.log("mounted");
  },
  created() {
    console.log("created");
  },
  destroyed() {
    console.log("destroyed");
  },
  updated() {
    console.log("updated");
  }


}

// console.log('this=',this);
// console.error(this);//error

// this.test0 = "ABC"

// this.data().test0 = "ABC"


</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.container2 {
  display: flex;
  justify-content: space-around;
}

.font-red{
  color: red;
}

</style>
